<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://1stjs.googlecode.com/svn/trunk/fw4/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>竖向选项卡</title>
<style type="text/css">
*{margin:0; padding:0;}
body,td {font-size:9pt;}

#tbox02{
	position:absolute;
	background-color:#6271B1;
	width:445px;
	height:408px;
	left:100px;
	top:100px;
}
#tbox02 .tab{
	position:absolute;
	left:0;
	top:0;
	width:84px;
}
#tbox02 .tab li{
	list-style:none;
	height:25px;
	line-height:25px;
	text-indent:10px;
	cursor:pointer;	
}
#tbox02 .tab .focus{
	background-color:#A1ACDB;
	border-right:solid 1px #A1ACDB;
	border-bottom:solid 1px #333333;
	border-left:solid 1px #C8CEEA;
	border-top:solid 1px #C8CEEA;
	color:#000000
}
#tbox02 .tab .blur {
	background:#4D5C9F;
	border-right:solid 1px #eeeeee;
	border-bottom:solid 1px #333333;
	border-left:solid 1px #798ACC;
	border-top:solid 1px #A1ACDB;
	color:#FFFFFF
}
#tbox02 .panel {
	background-color:#A1ACDB;
	border-right:solid 1px #888888;
	border-bottom:solid 1px #555555;
	border-left:solid 1px #eeeeee;
	border-top:solid 1px #C8CEEA;
	position:absolute;
	width:360px;
	height:406px;
	left:83px;
	top:0;
}
</style>
<script type="text/javascript" src="1st.js"></script>
</head>
<body>
<div id="tbox02">
	<div class="panel">
		<div>咖啡厅的内容</div>
		<div style="display:none;">学校的内容</div>
		<div style="display:none;">酒店的内容</div>			
	</div>
	<ul class="tab">
		<li class="focus">咖啡厅</li>
		<li class="blur">学校</li>
		<li class="blur">酒店</li>
	</ul>	
</div>


<script type="text/javascript">F("tbox02").slides();</script>
</body>
</html>
